<template>
	<view class="item" @click="bindGoToInfo(item.deviceSn)">
		<view class="flex">
			<image src="../../static/device_bg.jpg" mode="" style="width: 70rpx;height: 62rpx;"></image>
			<text class="font-26 margin-left-18" style="color: #4E5C7F;">{{ item.deviceSn }}</text>
		</view>
		<view class="flex margin-top-20">
			<view class="status" :class="[item.status == 0?'status-success':'status-danger']"></view>
			<text class="font-32 margin-left-20" style="color: #1E2531; font-weight: bold;">{{ item.statusInfo }}</text>
		</view>
		<view class="flex margin-top-18" v-if="item.fallInfo">
			<u-icon name="warning-fill" color="#FFAE43" size="26"></u-icon>
			<text class="margin-left-12 font-32" style="color: #FFAE43;font-weight: bold;">{{ item.fallInfo }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"device-item",
		props: {
			item: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {

			};
		},
		methods: {
			// 设备详情
			bindGoToInfo(deviceSn) {
				uni.navigateTo({
					url: `/pages/device/info?deviceSn=${deviceSn}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.item {
	background-color: #fff;
	border-radius: 30rpx;
	padding: 32rpx;
	margin-bottom: 20rpx;
	.status {
		width: 15rpx;
		height: 15rpx;
		border-radius: 50%;
	}
	.status-success {
		background-color: #2DE3C5;
	}
	.status-danger {
		background-color: #F15454;
	}
}
</style>
